<template>
  <div class="test-query-sql">
    <h1>SQL查询页面测试</h1>
    <p>如果您能看到这个页面，说明路由工作正常。</p>
    
    <el-card>
      <h3>组件加载测试</h3>
      <div>
        <p>当前时间: {{ currentTime }}</p>
        <el-button type="primary" @click="testClick">测试按钮</el-button>
      </div>
    </el-card>

    <el-card style="margin-top: 20px;">
      <h3>API测试</h3>
      <div>
        <el-button @click="testAPI">测试数据库连接API</el-button>
        <div v-if="apiResult" style="margin-top: 10px;">
          <pre>{{ JSON.stringify(apiResult, null, 2) }}</pre>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { sqlAPI } from '@/api/sql'

const currentTime = ref('')
const apiResult = ref(null)

const updateTime = () => {
  currentTime.value = new Date().toLocaleString()
}

const testClick = () => {
  ElMessage.success('按钮点击测试成功！')
}

const testAPI = async () => {
  try {
    const response = await sqlAPI.getDatabaseInstances()
    apiResult.value = response.data
    ElMessage.success('API调用成功')
  } catch (error) {
    console.error('API调用失败:', error)
    apiResult.value = { error: error.message }
    ElMessage.error('API调用失败: ' + error.message)
  }
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})
</script>

<style scoped>
.test-query-sql {
  padding: 20px;
}

pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>
